import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
export const draggerTable = {
  computed: {
    draggerComponents() {
      // const draggingMap = {}
      // this.columns.forEach((col) => {
      //   const key = col.dataIndex || col.key//这儿要求表格数据中要有这两个属性
      //   draggingMap[key] = col.width
      // })
      // const draggingState = Vue.observable(draggingMap)
      const resizeableTitle = (h, props, children) => {
        const { key, ...restProps } = props
        const col = this.columns.find(cols => {
          const k = cols.dataIndex || cols.key
          return k === key
        })
        if (!col || !col.width || col.dataIndex === 'setting') {
          return h('th', { ...restProps }, [...children])
        }
        const dragProps = {
          key: col.dataIndex || col.key,
          class: 'table-draggable-handle',
          attrs: {
            w: 10,
            x: col.width,
            z: 1,
            axis: 'x',
            draggable: true,
            resizable: false
          },
          on: {
            dragging: (x) => {
              col.width = Math.max(x, 1)
            }
          }
        }
        const drag = h('vue-draggable-resizable', { ...dragProps })
        return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
      }
      return {
        header: {
          cell: resizeableTitle
        }
      }
    },
  },
}